<template>
	<view class="imp-container">
		<view>			
			<view class="msg-box">
				<text>真实姓名</text>
				<input placeholder="请填写您的真实姓名" v-model="userItem.otherId.name" />
			</view>
			<view class="msg-box">
				<text>身份证号</text>
				<input placeholder="请填写您的身份证号" v-model="userItem.otherId.IDnumber" />
			</view>
			<view class="msg-box">
				<text>密码</text>
				<input placeholder="请填写您的密码" v-model="userItem.otherId.password" />
			</view>
			<view class="msg-box" @click="open">
				<text>性别</text>

				<view v-if="userItem.otherId.gender==undefined" style="font-size: 14px;color: #a1a1a1;">
					{{ '请选择您的性别'}}
				</view>
				<!-- {{userItem.otherId.gender ?userItem.otherId.gender  :genderValue}} -->
				<view v-else>
					{{ genderData[userItem.otherId.gender]?.name }}
				</view>
			</view>
			<view>
				<up-popup :show="showGender" @open="open" ref="popup" type="bottom" background-color="red"
					:safe-area="false" border-radius="16px">
					<view class="pop-content">
						请选择患者性别
					</view>
					<view class="pop-gender" v-for="item in genderData" :key="item.choose"
						@click="chooseGender(item.choose,item.name)">
						{{item.name}}

					</view>
					<!-- {{genderId}} -->
					<view class="pop-bottom" @click="showGender=false">
						取消
					</view>
				</up-popup>
			</view>
			<!-- </view> -->

			<view class="msg-box" @click="showTime = true">
				<text>出生日期</text>
				<view v-if="!userItem.otherId.birthday">
					<view style="font-size: 14px;color: #a1a1a1;">请选择您的出生日期</view>
				</view>

				<view v-else style="font-size: 14px;color: #333;">
					{{userItem.otherId.birthday? userItem.otherId.birthday: birthdayText}}
				</view>

				<u-datetime-picker :show="showTime" v-model="current" mode="date" :minDate="min" :maxDate="max"
					@confirm="onConfirm" @cancel="showTime = false" />
			</view>
			<view class="msg-box">
				<text>联系电话</text>
				<input placeholder="请填写您的手机号" v-model="userItem.otherId.phone" />
			</view>
			<view class="msg-box">
				<text>现居地</text>
				<input placeholder="请填写现居地" v-model="userItem.otherId.address" />
			</view>
			<view class="msg-box" @click="openRelation">
				<text>与本人关系</text>
				<view v-if="!userItem.relationship">
					<view style="font-size: 14px;color: #a1a1a1;">
						请选择和您的关系
					</view>
				</view>
				<view v-else>
					<view style="font-size: 14px;color: #333;">
						{{userItem.relationship}}
					</view>
				</view>
				<view>
					<up-popup :show="showRelation" @open="openRelation" ref="popup" type="bottom" background-color="red"
						:safe-area="false" border-radius="16px">
						<view class="pop-content">
							请选择与本人关系
						</view>
						<template v-for="item in relationData" :key="item.choose">
							<view class="pop-gender"
								@click="(userItem.relationship=item.name) && (showRelation=false) ">
								{{item.name}}
							</view>
						</template>
						<view class="pop-bottom" @click="showRelation=false">
							取消
						</view>
					</up-popup>
				</view>
			</view>
			
		
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		addMemberApi,
		searchMemberApi
	} from '../../../api/home-member.js';
	import {
		getUserInfoApi
	} from '../../../api/login.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'


	const userItem = defineModel('userItem');






	function chooseGender(choose, name) {
		genderValue.value = name
		userItem.value.otherId.gender = choose
		showGender.value = false
	}


	// 性别底部弹窗
	const showGender = ref(false);
	// 性别
	const genderData = ref([{
			name: '女',
			choose: 0
		},
		{
			name: '男',
			choose: 1
		}
	])

	const genderValue = ref('')
	const genderId = ref()





	// 与本人关系
	const showRelation = ref(false)
	const RelationValue = ref('')
	const relationData = ref([{
			name: '本人',
			choose: 0
		},
		{
			name: '父母',
			choose: 1
		},
		{
			name: '夫妻',
			choose: 2
		},
		{
			name: '姐妹',
			choose: 3
		},
		{
			name: '兄弟',
			choose: 4
		}
	])




	// 性别打开方法
	const open = () => {
		showGender.value = true;
	}
	// 与本人关系打开方法
	const openRelation = () => {
		showRelation.value = true;
	}

	// 时间选择器
	const showTime = ref(false);
	const current = ref(Date.now());
	const birthdayText = ref('');
	const min = new Date('2014-01-01').getTime();
	const max = new Date('2025-12-31').getTime();

	// 确认回调

	const onConfirm = (e) => {
		// e.value 是时间戳
		const d = new Date(e.value);
		const y = d.getFullYear();
		const m = String(d.getMonth() + 1).padStart(2, '0');
		const day = String(d.getDate()).padStart(2, '0');
		userItem.value.otherId.birthday = `${y}-${m}-${day}`;
		showTime.value = false;
	};
</script>

<style scoped lang="scss">
	.container {
		padding: 40rpx;
	}

	.msg-box {
		height: 88rpx;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		// .nameInput{
		// 	margin-right: 200rpx;
		// }
	}

	.pop-bottom {
		height: 120rpx;
		color: #999;
		font-size: 16px;
		border-top: 10rpx solid #eee;
		// line-height: 174rpx;
		text-align: center;
		padding-top: 60rpx;
		font-weight: 510;
	}

	.pop-gender {
		height: 112rpx;
		border-bottom: 1px solid #eee;
		font-size: 16px;
		color: #1877f2;
		line-height: 112rpx;
		text-align: center;
		font-weight: 510;
	}

	.pop-content {
		height: 88rpx;
		border-bottom: 1px solid #eee;
		color: #999;
		font-size: 12px;
		line-height: 88rpx;
		text-align: center;
	}

	.msg-box {
		height: 88rpx;
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;

		text {
			margin-right: 50rpx;
			width: 140rpx;
			// font-size: 14px;
			font-weight: 400;
			font-style: normal;
			font-size: 14px;
		}

		input {

			font-size: 14px;
		}
	}

	.imp-container {
		padding: 0 40rpx;
		background: #fff;
	}
</style>